<template>
  <div class="app-container">

    <Tabs :active-value="queryParams.inspectionStatus" :tabs="tabs" is-show-count @change="changeTab"></Tabs>

    <SearchContent :queryParams="queryParams" labelWidth="145px" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="车牌号/车架号:">
          <el-input v-model="queryParams.carNoVinNo" clearable placeholder="请输入车牌号/车架号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆归属:">
          <el-input v-model="queryParams.ascription" clearable placeholder="请输入车辆归属"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="品牌/车系/车型:">
          <linkage-select @changeNode="linkageChange" v-model="linkageList" placeholder="请选择品牌/车系/车型"/>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="年检时效:">
          <el-select v-model="queryParams.validityStatus" placeholder="请选择年检时效">
            <el-option label="有效" value="1"></el-option>
            <el-option label="无效" value="2"></el-option>
            <el-option label="临期" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="产品类型:">
          <el-select v-model="queryParams.contractType" placeholder="请选择产品类型" style="width: 100%">
            <el-option v-for="item in dict.type.contract_type" :key="item.value" :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆运营:" prop="operationsName">
          <el-input v-model="queryParams.operationsName" clearable placeholder="请输入车辆运营"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户名称:">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入客户名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="年检状态:">
          <el-select v-model="queryParams.inspectionStatus" placeholder="请选择年检状态">
            <el-option v-for="item in tabs"
                       :label="item.label" :value="item.value" :key="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆产权:">
          <el-select filterable v-model="queryParams.propertyRightId" clearable placeholder="请选择车辆产权"
                     style="width: 100%">

            <el-option v-for="item in companyOriginList" :label="item.deptName" :value="item.deptId"
                       :key="item.deptId"/>

          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="预计下次年检到期日:">
          <el-date-picker v-model="dateValueNext" type="daterange" range-separator="-" start-placeholder="开始日期"
                          end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable @change="changeDateNext">
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="查询时间:">
          <shortcut-date @dateChangeType="dateChangeType" @isButIdx="isButIdx" v-model="checked">
            <el-date-picker v-model="dateValue" type="daterange" range-separator="-" unlink-panels
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable
                            @change="changeDate">
            </el-date-picker>
          </shortcut-date>
        </el-form-item>
      </el-col>

    </SearchContent>

    <div class="card-wrap card-padding">
      <div class="table-title-wrap justify-end">
        <e-button type="primary" size="mini" v-hasPermi="['njgl:inspectAnnuallyList:view']" @click="handleExport">导出
        </e-button>
      </div>

      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" fixed="left" width="100">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="viewOpen(row)"
                         v-hasPermi="['njgl:inspectAnnuallyList:view']">查看
              </el-button>

              <el-button size="mini" type="text" v-hasPermi="['njgl:inspectAnnuallyList:dele']"
                         @click="del(row)">删除
              </el-button>
            </template>
          </el-table-column>
        </template>

        <template slot="tableCol">
          <el-table-column align="center" label="车牌号" min-width="100">
            <template slot-scope="{ row }">
              <el-button type="text">{{ row.carNo }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="车架号" min-width="180" show-overflow-tooltip prop="vinNo"/>
          <el-table-column align="center" label="车辆产权" show-overflow-tooltip min-width="160"
                           prop="propertyRightName"/>
          <el-table-column align="center" label="车辆归属" show-overflow-tooltip min-width="160" prop="ascription"/>
          <el-table-column align="center" label="车辆运营" show-overflow-tooltip min-width="120" prop="operationsName"/>
          <el-table-column align="center" label="车辆大区" show-overflow-tooltip min-width="160">
            <template #default="{row}">
              <span v-if="row.region">{{ row.region }} </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户名称" show-overflow-tooltip width="160" prop="customerName"/>
          <el-table-column align="center" label="产品类型" width="100">
            <template slot-scope="{ row }">
              {{ selectDictLabel(dict.type.contract_type, row.contractType) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="品牌/车系/车型" show-overflow-tooltip width="320">
            <template slot-scope="{ row }">
              {{ row.brandName }}{{
                row.seriesName ? "/" + row.seriesName : ""
              }}{{ row.modelName ? "/" + row.modelName : "" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="车辆性质" width="100">
            <template slot-scope="{ row }">
              {{ selectDictLabel(dict.type.car_nature, row.carNature) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="车辆类型" width="160">
            <template slot-scope="{ row }">
              {{
                selectDictLabel(dict.type.car_type, row.carType)
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="车辆登记日期" width="120" prop="registerTime">
            <template slot-scope="{row}">
              {{ row.registerTime ? $dayjs(row.registerTime).format('YYYY-MM-DD') : '' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="年检状态" width="100">
            <template slot-scope="{ row }">
              {{
                selectDictLabel(
                    dict.type.inspection_status,
                    row.inspectionStatus
                )
              }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="年检时效" width="120" prop="inspectionAging"/>
          <el-table-column align="center" label="预计下次年检到期日" width="160" prop="inspectionNextTime"/>
          <el-table-column align="center" label="预计下次年检线上/线下" width="160" prop="expireOnlineOffline">
            <template #default="{row}">
              <span v-if="Number(row.expireOnlineOffline) === 1">线上</span>
              <span v-if="Number(row.expireOnlineOffline) === 2">线下</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="上次年检到期日" show-overflow-tooltip width="120"
                           prop="inspectionLastTime"/>
          <el-table-column align="center" label="上次年检线上/线下" width="140" prop="lastOnlineOffline">
            <template #default="{row}">
              <span v-if="Number(row.lastOnlineOffline) === 1">线上</span>
              <span v-if="Number(row.lastOnlineOffline) === 2">线下</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="本次年检时间" width="120" prop="inspectionTime"/>
          <el-table-column align="center" label="本次年检线上/线下" width="140" prop="onlineOffline">
            <template #default="{row}">
              <span v-if="Number(row.onlineOffline) === 1">线上</span>
              <span v-if="Number(row.onlineOffline) === 2">线下</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="年检总金额" width="120" prop="inspectionAllPrice"/>
          <el-table-column align="center" label="车管负责人" width="120" prop="carInspectionPerson"/>

          <el-table-column align="center" label="年检备注" width="140" prop="remark"/>
        </template>
      </table-page>
    </div>
  </div>
</template>

<script>
import {getDataList, delInspection, tabsCount} from "@/api/zcwh/njglApi.js";

import {getToken} from "@/utils/auth";

import LinkageSelect from "../../components/linkageSelect";
import CitySelect from "../../components/citySelect.vue";
import SearchContent from "@/components/SearchContent/index.vue";
import Tabs from "@/components/Tabs/index.vue";
import ShortcutDate from "@/views/components/ShortcutDate/index.vue";
import {listDept} from "@/api/system/dept";
export default {
  name: "inspectAnnuallyList",

  dicts: [
    "car_business_type",
    "work_order_type",
    "contract_type",
    "car_nature",
    "inspection_status",
    "car_type"
  ],
  components: {
    LinkageSelect,
    CitySelect,
    ShortcutDate,
    SearchContent,
    Tabs,
  },
  computed: {},
  data() {
    return {
      tabsCountList: {},
      checked: "",
      dateValue: [],
      dateValueNext: [],
      linkageList: [],
      citySelection: [],
      // 遮罩层
      loading: false,

      // 显示搜索条件
      showSearch: false,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNoVinNo: "",
        ascription: "",
        brandName: "",
        seriesName: "",
        modelName: "",
        validityStatus: "",
        contractType: "",
        operationsName: "",
        customerName: "",
        nextStartTime: "",
        nextEndTime: "",
        startTime: "",
        endTime: "",
        inspectionStatus: "",
        propertyRightId:""
      },

      total: 0,
      dataList: [],
      createTime: [],
      time: [],
      tabs: [
        {
          label: "全部",
          value: "",
          count: 0,
        },
        {
          label: "待年检",
          value: 1,
          count: 0,
        },
        {
          label: "已年检",
          value: 2,
          count: 0,
        },
        {
          label: "超时待年检",
          value: 3,
          count: 0,
        },
      ],
      dateJqx: [],
      dateSyx: [],
      companyOriginList:[]
    };
  },
  created() {
    this.getList();
    this.tabsCount();
    this.getCompanyOrigin();
  },
  methods: {
    getCompanyOrigin() {
      listDept({
        deptType: "2", //组织类型（1部门 2公司）
        regionId: null, //所在城市（省市区id）
      }).then((res) => {
        this.companyOriginList = res.data;
      });
    },
    changeTab(value) {
      this.queryParams.inspectionStatus = value;
      this.getList();
    },
    tabsCount() {
      tabsCount().then((res) => {
        this.tabsCountList = res;
        this.tabs[0].count =
            Number(this.tabsCountList.noInspection) +
            Number(this.tabsCountList.yesInspection) +
            Number(this.tabsCountList.overdueInspection);
        this.tabs[1].count = this.tabsCountList.noInspection;
        this.tabs[2].count = this.tabsCountList.yesInspection;
        this.tabs[3].count = this.tabsCountList.overdueInspection;
      });
    },
    isButIdx(idx) {
      this.checked = idx;
    },
    dateChangeType(val) {
      if (val) {
        this.$set(this.dateValue, 0, val[0]);
        this.$set(this.dateValue, 1, val[1]);
        this.queryParams.startTime = val[0];
        this.queryParams.endTime = val[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
      this.$forceUpdate();
    },
    // 时间段选择
    changeDate(val) {
      this.checked = -1;
      if (val) {
        this.queryParams.startTime = val[0];
        this.queryParams.endTime = val[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
    },
    changeDateNext(val) {
      if (val) {
        this.queryParams.nextStartTime = val[0];
        this.queryParams.nextEndTime = val[1];
      } else {
        this.queryParams.nextStartTime = "";
        this.queryParams.nextEndTime = "";
      }
    },


    // 品牌/车系/车型选择
    linkageChange(val) {
      this.linkageList = val;
      if (val) {
        this.queryParams.brandName = val[0] ? val[0].name : "";
        this.queryParams.seriesName = val[1] ? val[1].name : "";
        this.queryParams.modelName = val[2] ? val[2].name : "";
      } else {
        this.queryParams.brandName = "";
        this.queryParams.seriesName = "";
        this.queryParams.modelName = "";
      }
      this.$forceUpdate();
    },

    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      getDataList(this.queryParams)
          .then((res) => {
            if (res.code == "200") {
              const {rows, total} = res;
              this.dataList = rows;
              this.total = total;
              this.loading = false;
            }
          })
          .catch(() => {
            this.loading = false;
          });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.createTime = [];
      this.time = [];
      this.citySelection = [];
      this.linkageList = [];
      this.dateValue = [];
      this.dateJqx = []
      this.dateSyx = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        carNoVinNo: "",
        ascription: "",
        brandName: "",
        seriesName: "",
        modelName: "",
        validityStatus: "",
        contractType: "",
        operationsName: "",
        customerName: "",
        nextStartTime: "",
        nextEndTime: "",
        startTime: "",
        endTime: "",
        inspectionStatus: "",
        propertyRightId:""
      };
      this.checked = -1;
      this.getList();
    },

    viewOpen(row, type) {
      this.$router.push({
        path: "/clgl/inspectAnnuallyDetails",
        query: {
          id: row.id,
          // orderCode: row.orderCode,
        },
      });
    },

    del(row) {
      this.$confirm("是否删除这条信息?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            delInspection(row.id).then((res) => {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
          "car/carInspection/exportList",
          {
            ...this.queryParams,
          },
          `年检管理列表_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.top-el {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .top-el-i {
    width: 32%;
    text-align: center;
    padding: 8px 0;
    background-color: #fff;
    border-radius: 8px;
  }

  margin-bottom: 16px;
}

.el-form {
  padding: 18px 20px;
  padding-bottom: 8px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-form-item__label {
    font-size: 14px;
    font-family: 400;
  }
}
</style>
